<template>
  <v-app>
    <Navbar />
    <v-main>
      <router-view />
    </v-main>
    <div class="audio-player">
      <aPlayer
        v-if="music.length"
        autoplay
        :music="music[0]"
        :list="music"
        :mini="audioPlayerMin"
      />
      <v-icon
        class="player-min"
        :color="audioPlayerMin ? 'white' : 'grey'"
        :small="true"
        @click="audioPlayerMin = !audioPlayerMin"
        theme="pic"
        :showLrc="true"
        :float="true"
      >
        {{ audioPlayerMin ? "mdi-window-maximize" : "mdi-minus" }}
      </v-icon>
    </div>
  </v-app>
</template>

<script>
import Navbar from "@/components/Navbar";
import aPlayer from "vue-aplayer";
import { randImage } from "@/api/image";
import { getMusicList, getMusicLyricById, getMusicSongById } from "@/api/music";
export default {
  name: "App",
  components: { Navbar, aPlayer },
  mounted() {
    randImage().then(res => {
      if (res.code === 200) {
        const link = res.data.image.link;
        const indexOf = link.lastIndexOf(".");
        const app = document.getElementById("app");
        app.style.backgroundImage = `url(${link.substr(
          0,
          indexOf
        )}_1920x1080_80_c${link.substr(indexOf)})`;
        app.style.backgroundColor = "rgba(0, 0, 0, .2)";
        app.style.backgroundPosition = "center top";
        app.style.backgroundRepeat = "no-repeat";
        app.style.backgroundAttachment = "fixed";
        app.style.backgroundSize = "cover";
      }
    });
    getMusicList().then(res => {
      for (const v of res.playlist.tracks) {
        let obj = {
          title: v.name,
          artist:
            v.ar.length === 1 ? v.ar[0].name : v.ar.map(v => v.name).join("/"),
          pic: v.al.picUrl
        };
        getMusicSongById(v.id).then(res => {
          obj.src = res.data[0].url;
          getMusicLyricById(v.id).then(res => {
            obj.lrc = res.lrc.lyric;
            this.music.push(obj);
          });
        });
      }
    });
  },
  methods: {
    scrollClick() {
      let scrollTopTimer = setInterval(function() {
        const top =
          document.body.scrollTop || document.documentElement.scrollTop;
        const speed = top / 6;
        if (document.body.scrollTop !== 0) {
          document.body.scrollTop -= speed;
        } else {
          document.documentElement.scrollTop -= speed;
        }
        if (top === 0) {
          clearInterval(scrollTopTimer);
        }
      }, 30);
    }
  },
  data() {
    return {
      audioPlayerMin: true,
      music: []
    };
  }
};
</script>

<style lang="scss">
#app {
  min-width: 300px;
  box-shadow: inset 0px -60px 45px -15px #fff;
  font-family: "Comic Sans MS", "华文行楷", "黑体", "JetBrains Mono", serif !important;
}
.conception-speak {
  width: 100%;
  height: 100%;
  max-height: 93vh;
  .speak {
    text-align: center;
    position: relative;
    top: 45%;
    transform: translateY(-50%);
    .conception {
      font-size: 2.9em;
      font-family: "Comic Sans MS", "华文行楷", "黑体", "JetBrains Mono", serif !important;
      text-shadow: 0.1rem 0.1rem 0.2rem rgb(0 0 0 / 15%);
    }
    @media screen and (max-width: 500px) {
      .conception {
        font-size: 2em;
      }
    }
  }
  .down {
    text-align: center;
    position: relative;
    top: 80%;
    transform: translateY(-50%);
    i {
      color: #eeeeee;
    }
  }
}
.audio-player {
  position: fixed;
  bottom: 30px;
  left: 0;
  z-index: 10;
  .aplayer {
    margin: 0;
  }
  .player-min {
    position: absolute;
    right: 0;
    top: 0;
  }
}
</style>
